<!-- 筛选区展示 -->
<template>
    <div class="sub-filter" v-if="filterData && !filterLoading">
        <div class="item">
            <div class="head">品牌：</div>
            <div class="body">
                <a @click="changeBrand(brand.id)" :class="{ active: filterData.selectedBrand === brand.id }"
                    href="javasript:;" v-for="brand in filterData.brands" :key="brand.id">{{ brand.name }}</a>
            </div>
        </div>
        <div class="item" v-for="p in filterData.saleProperties" :key="p.id">
            <div class="head">{{ p.name }}：</div>
            <div class="body">
                <a :class="{ active: p.selectedProp === attr.id }" href="javasript:;" v-for="attr in p.properties"
                    :key="attr.id" @click="changeAttr(p, attr.id)">{{ attr.name }}</a>
            </div>
        </div>
    </div>
    <!-- 筛选选项骨架 -->
    <div v-else class="sub-filter">
        <XtxSkeleton class="item" width="800px" height="40px" />
        <XtxSkeleton class="item" width="800px" height="40px" />
        <XtxSkeleton class="item" width="600px" height="40px" />
        <XtxSkeleton class="item" width="600px" height="40px" />
        <XtxSkeleton class="item" width="600px" height="40px" />
    </div>
</template>
<script>
import { findSubCategoryFilter } from '@/api/category'
import { watch, ref } from 'vue';
import { useRoute } from 'vue-router';

// 获取筛选参数
const useGetFilterParams = (filterData) => {
    const filterParams = {}
    const attrs = []
    filterParams.brandId = filterData.value.selectedBrand
    filterData.value.saleProperties.forEach(p => {
        const attr = p.properties.find(attr => attr.id === p.selectedProp)
        if (attr && attr.id !== undefined) {
            attrs.push({ groupName: p.name, propertyName: attr.name })
        }
    })
    if (attrs.length)
        filterParams.attrs = attrs
    return filterParams
}
// 选择品牌
const useChangeBrand = (filterData, emit) => {
    const changeBrand = (brandId) => {
        if (filterData.value.selectedBrand === brandId) return
        filterData.value.selectedBrand = brandId
        emit('filter-change', useGetFilterParams(filterData))
    }
    return { changeBrand }
}
// 选中属性
const useChangeAttr = (filterData, emit) => {
    const changeAttr = (p, attrId) => {
        if (p.selectedProp === attrId) return
        p.selectedProp = attrId
        emit('filter-change', useGetFilterParams(filterData))
    }
    return { changeAttr }
}
const useWatch = (filterData, filterLoading) => {
    const route = useRoute()
    // 监听route.params.id的变化
    watch(() => route.params.id, (newVal, oldVal) => {
        // 点击二级分类时 route.params.id也会触发一次 需要判断来区分
        if (newVal && route.path === ('/category/sub/' + newVal)) {
            filterLoading.value = true
            newVal && findSubCategoryFilter(route.params.id).then(({ result }) => {
                // 添加selectedBrand
                result.selectedBrand = null
                result.brands.unshift({ id: null, name: '全部' })
                // 逐个添加selectedProp
                result.saleProperties.forEach(p => {
                    p.selectedProp = null
                    p.properties.unshift({ id: null, name: '全部' })
                })
                filterData.value = result
                filterLoading.value = false
            })
        }
    }, { immediate: true })
}
export default {
    name: 'SubFilter',
    setup(props, { emit }) {

        const filterData = ref(null)
        const filterLoading = ref(false)

        //watch监听 route.params.id
        useWatch(filterData, filterLoading)

        // 选择品牌
        const { changeBrand } = useChangeBrand(filterData, emit)
        // 选中属性
        const { changeAttr } = useChangeAttr(filterData, emit)
        return {
            filterData, filterLoading, changeBrand, changeAttr
        }
    }
}
</script>
<style scoped lang='less'>
// 筛选区
.sub-filter {
    background: #fff;
    padding: 25px;

    .item {
        display: flex;
        line-height: 40px;

        .head {
            width: 80px;
            color: #999;
        }

        .body {
            flex: 1;

            a {
                margin-right: 36px;
                transition: all .3s;
                display: inline-block;

                &.active,
                &:hover {
                    color: @xtxColor;
                }
            }
        }
    }
}
</style>